<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin的塌陷问题</title>
    <style>
      div {
        width: 200px;
        height: 200px;
      }
      /* d1 的上外边距 和d2的下外边距会重合一部分 不会为110px 这种情况一般不解决 设置的时候给一个元素设置自己想要的就行了 */
      .d1 {
        background-color: #ffccff;
        margin-bottom: 50px;
      }
      .d2 {
        background-color: yellowgreen;
        margin-top: 60px;
      }
      /* 左右的外边距不会重合 */
      .d3 {
        background-color: lime;
        display: inline-block;
        margin-right: 20px;
      }
      .d4 {
        background-color: blueviolet;
        display: inline-block;
        margin-left: 20px;
      }

    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <hr>
    <div class="d3"></div><div class="d4"></div>
</body>
</html>